<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{
        margin: 20px 20px;
        width: 500px;
        height: 400px;

    }
    .frame{
        padding: 10px 0;
    }
    .frame input[type="text"]{
        width: 300px;
        padding: 5px;
        height: 35px;
        outline: 0;
        border: 1px solid #C5C5C5;
    }
    .frame select{
        width: 300px;
        padding: 5px;
        outline: 0;
        height: 35px;
        border: 1px solid #c5c5c5;
    }
    label{
        display: block;
    }
    .divBtn{
        margin: 10px 0;
        padding: 0;
        width: 60%;
        text-align: right;
    }
    input.reset,input.query,input.delete{
        border: 0;
        color: #fff;
        width: 80px;
        height: 35px;
        outline: 0;
    }
    input.reset{
        background-color: #ed9c28;
    }
    input.query{
        background-color: #009fcd;
    }
    input.delete{
        background-color: #d9534f;
    }
</style>
<body>
<div class="box">
<!--         <input type="button" name="" value="重置" class="reset" id="reset" data-dismiss="modal"/> -->
	<!--  
    <div class="frame">
        <label for="">白名单卡号</label>
        <input type="text" placeholder="请输入要增加的白名单,多个卡号用逗号分割" class="whitecard1"/>
        <span class="msg"></span>
    </div>
    <div class="frame">
        <label for="">白名单卡号</label>
        <input type="text" placeholder="请输入要删除的白名单,多个卡号用逗号分割" class="whitecard2"/>
        <span class="msg"></span>
    </div>
    <div class="divBtn">

        <input type="button" name="" value="删除" class="delete" id="delete" data-dismiss="modal"/>
        <input type="button" name="" value="增加" class="query" id="query"/>
    </div>	
	-->
	
  <form  id="form_add" method="post"  class="instruct_box w5c-form demo-form"  role="form" w5c-form-validate="vm.validateOptions" novalidate name="validateForm">
	    <div class="frame">
            <label>设备地址</label>
            <input type="text" class="form-control" name="chargerId" placeholder="请输入16位设备地址" required="" ng-model="chargerId">
	        <label for="">白名单卡号</label>
	        <input type="text" placeholder="请输入要增加的白名单,多个卡号用逗号分割" class="whitecard1" id="white_list_add" name="white_list"/>
	        <span class="msg"></span>
	    </div>
	     <div class="divBtn">
	        <input type="button" name="" value="增加" class="query" id="add"/>    
	    </div>        
	     <input type="hidden"  name="queryOrSet" value ="01">
         <input type="hidden"  name="queryOrSetParamType" value ="05">
         <input type="hidden"  name="operation_type" value ="01">
   </form>	

  <form  id="form_del" method="post"  class="instruct_box w5c-form demo-form"  role="form" w5c-form-validate="vm.validateOptions" novalidate name="validateForm">
	    <div class="frame">
            <label>设备地址</label>
            <input type="text" class="form-control" name="chargerId" placeholder="请输入16位设备地址" required="" ng-model="chargerId">
	        <label for="">白名单卡号</label>
	        <input type="text" placeholder="请输入要删除的白名单,多个卡号用逗号分割" class="whitecard2" id="white_list_del" name="white_list"/>
	        <span class="msg"></span>
	    </div>  
	    <div class="divBtn">
	        <input type="button" name="" value="删除" class="query" id="del"/>
	    </div>    
	     <input type="hidden"  name="queryOrSet" value ="01">
         <input type="hidden"  name="queryOrSetParamType" value ="05">
         <input type="hidden"  name="operation_type" value ="02">
   </form>	
	

</div>
</body>
<script>
$('#add').on('click', function() {
      $.ajax({
          type : 'post',
          url : '/cms/chargeControll/queryOrSetParam',
          data : $('#form_add').serialize(),
          dataType : "json",
          async : false,
          success : function(data) {
              if (data.code == '200') {
                  bootboxWindow.alert("指令下发成功!", null);
              } else {
                  bootboxWindow.alert("指令下发失败!", null);
              }
          },
          error:function(){
              bootboxWindow.alert("无法连接服务器!")
          }
      })
});
$('#del').on('click', function() {
    $.ajax({
        type : 'post',
        url : '/cms/chargeControll/queryOrSetParam',
        data : $('#form_del').serialize(),
        dataType : "json",
        async : false,
        success : function(data) {
            if (data.code == '200') {
                bootboxWindow.alert("指令下发成功!", null);
            } else {
                bootboxWindow.alert("指令下发失败!", null);
            }
        },
        error:function(){
            bootboxWindow.alert("无法连接服务器!")
        }
    })
});
</script>
</html>